<template>
  <div>
    <n-drawer v-model:show="isShow" :width="500" placement="right" @update:show="clearForm">
      <n-drawer-content :title="drawerTitle" closable>
        <n-form
          :model="form"
          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="角色名称" path="roleName">
            <n-input placeholder="请输入角色名称" v-model:value="form.roleName" />
          </n-form-item>
          <n-form-item label="角色编码" path="roleCode">
            <n-input placeholder="按照Spring Security约定建议以‘ROLE_’开头" v-model:value="form.roleCode" />
          </n-form-item>
          <n-form-item label="数据权限" path="dsType">
            <n-select  placeholder="请选择数据权限" :options="dataScopeList" v-model:value="form.dsType" @update:value="changeDsType"/>
          </n-form-item>
          <n-form-item :show-label="false" v-if="form.dsType=='4'" style="margin-top: 10px" label="">
            <div style="position:relative;width: 200px;margin: 0 auto">
              <n-tree
                multiple
                block-line
                :cascade="true"
                :virtual-scroll="true"
                :selected-keys="selectedDeptkeys"
                style="max-height: 500px;overflow: hidden"
                :data="deptData"
                v-model:selected-keys="selectedDeptkeys" />
            </div>
          </n-form-item>
          <n-form-item label="角色描述" path="roleDesc">
            <n-input
              placeholder="角色描述"
              v-model:value="form.roleDesc"
              type="textarea"
              :autosize="{minRows: 3,maxRows: 5}"/>
          </n-form-item>
        </n-form>
        <template #footer>
          <n-space>
            <n-button type="primary" :loading="submitLoading" @click="submitForm">提交</n-button>
            <n-button @click="handleResetForm">关闭</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,watchEffect} from 'vue';
import {useMessage} from 'naive-ui'
import {getDeptTreeData} from '@/api/system/dept'
import {saveRole,updateRole} from "@/api/system/role";

export default defineComponent({
  name: "RoleForm",
  props:{
    drawerTitle:{
      type:String
    }
  },
  setup(props,context){
    const message = useMessage();
    const isShow=ref(false);
    let form=ref({})
    const formRef=ref({});
    const deptData=ref([])
    const selectedDeptkeys=ref([])
    const rules={
      roleName:{required:true, message: '请输入角色名称', trigger: 'blur',},
      roleCode:{required:true, message: '请输入角色编码', trigger: 'blur',},
      dsType:{required:true,message:'请选择数据权限',trigger:['change','blur']}
    };
    const submitLoading=ref(false);
    const dataScopeList=ref(
      [
        {
          value: "1",
          label: '全部'
        },
        {
          value: "2",
          label: '本级'
        },
        {
          value: "3",
          label: '本级以及子级'
        },
        {
          value: "4",
          label: '自定义'
        }
      ]
    )
    function handleResetForm(){
      formRef.value.restoreValidation();
      isShow.value=false;
    }
    function changeDsType(value) {
      if(value=='4'){
        loadDeptData()
      }else{
        selectedDeptkeys.value=[];
        form.value.roleDeptIdList=[]
      }
    }
    function clearForm() {
      form.value={}
    }
    function loadDeptData(){
      getDeptTreeData().then(res=>{
        deptData.value=res;
      })
    }
    watchEffect(() => {
      if(Object.keys(form.value).length!=0){
        if(form.value.dsType=='4'){
          loadDeptData()
        }
      }
    });
    function submitForm(e){
      e.preventDefault()
      formRef.value.validate((errors) => {
        if (!errors) {
          submitLoading.value=true;
          if(form.value.dsType=='4'){
            form.value.deptIdList=selectedDeptkeys.value;
          }
          let obj;
          if(form.value.id){
            obj=updateRole(form.value)
          }else{
            obj=saveRole(form.value)
          }
          if(obj){
            message.success('操作成功')
            clearForm();
            isShow.value=false;
            selectedDeptkeys.value=[];
            submitLoading.value=false;
            context.emit('on-success')
          }else{
            message.error(obj.msg);
          }
        } else {
          console.log(errors)
          message.error('验证失败')
        }
      })
    }
    return {
      isShow,
      form,
      rules,
      submitLoading,
      formRef,
      dataScopeList,
      deptData,
      submitForm,
      handleResetForm,
      changeDsType,
      selectedDeptkeys,
      clearForm
    }
  }
})
</script>

<style scoped>

</style>
